<template>
  <div class="demo">
    <div class="demo-title">带搜索框</div>
    <div class="demo-content">
      <Select
        v-model:value="value"
        show-search
        placeholder="Select a person"
        style="width: 200px"
        :options="options"
        :filter-option="filterOption"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const value = ref<string | undefined>(undefined);
  const options = ref<SelectProps['options']>([
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'tom', label: 'Tom' },
  ]);
  const handleChange = (val) => console.log(`selected ${val}`);
  const handleBlur = () => console.log('blur');
  const handleFocus = () => console.log('focus');
  const filterOption = (input: string, option: any) =>
    option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
</script>
